<template>
  <div>
    <div v-if="$route.query.id" class="list-table mb20">
      <div v-show="!menuKeyMark" class="area-header">
        <span class="area-header-title">{{ $t('费用统计') }}</span>
      </div>
      <el-form v-if="$route.query.id" ref="queryForm" :model="queryParams" :inline="true" @submit.native.prevent>
        <el-form-item :label="$t('申请标题')" prop="actTitle">
          <el-input v-model="queryParams.actTitle" :placeholder="$t('申请标题')" clearable :maxlength="200" @keyup.enter.native="queryHandle" />
        </el-form-item>
        <el-form-item v-if="$route.query.id" :label="$t('出资人')" prop="investId">
          <fund-lp-select v-model="queryParams.investId" :fund-id="$route.query.id" />
        </el-form-item>
        <el-form-item :label="$t('费用类型')" prop="typesFee">
          <dict-select v-model="queryParams.typesFee" :placeholder="$t('费用类型')" dictionary="fund_expense_type_fee" />
        </el-form-item>
        <el-form-item :label="$t('时段')" prop="rangeDate">
          <date-picker v-model="rangeDate" type="daterange" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle('chart')">{{ $t("搜索") }}</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery('chart')">{{ $t("重置") }}</el-button>
        </el-form-item>
      </el-form>

      <div class="mb20">
        <el-row type="flex">
          <el-col :span="8">
            <div id="table" v-loading="tableLoading" class="table">
              <!--              <el-row>-->
              <!--                <el-col v-for="(statistical,index) in dataList" :key="index" :span="12">-->
              <!--                  <div v-for="(value, key) in statistical" :key="key" style="overflow: hidden;border-bottom: 1px solid #eee;border-right: 1px solid #eee" :style="{'border-left': (index+1) % 2 === 0 ? 'none' : '1px solid #eee','border-top': index === 0 || index === 1 ? '1px solid #eee' : 'none'}">-->
              <!--                    <div class="w50" style="border-right: 1px solid #eee;background:#eefefe">{{ key === 'SUM' ? '合计' : selectDictLabel(expenseTypes,key) }}</div>-->
              <!--                    <div class="w50" style="color: red;font-weight: bold;text-align: right">{{ moneyFormat(value) }}</div>-->
              <!--                  </div>-->
              <!--                </el-col>-->
              <!--              </el-row>-->
              <el-row>
                <div>
                  <el-col v-for="(statistical,index) in dataList" :key="index" :span="12">
                    <div v-for="(value,key) in statistical" :key="key" class="fund-parent mb10" style="display: flex;align-items: center;">
                      <div class="left-text">
                        <div class="chart" style="width: 2vh;display: inline-block;">
                          <circle-chart style="display: inline-block;vertical-align: middle" :expense="[expenseSum,key === 'SUM' ? -1 : value]" />
                        </div>
                        <div class="referenceSpan" :title="key === 'SUM' ? '合计' : selectDictLabel(expenseTypes,key)">{{ key === 'SUM' ? '合计' : selectDictLabel(expenseTypes,key) }}</div>
                      </div>
                      <div class="money-text" :title="value ? moneyFormat(value) : ''">{{ value ? moneyFormat(value) : '-' }}</div>
                    </div>
                  </el-col>
                </div>
              </el-row>
            </div>
          </el-col>
          <el-col :span="16">
            <!--          <el-row>-->
            <!--            <el-col :span="12">-->
            <!--              <div v-loading="typeChartLoading" style="max-height: 220px">-->
            <!--                <el-empty v-if="(!typeChartData || typeChartData.length <= 0) && !typeChartLoading" description="暂无数据" />-->
            <!--                <fund-expense-type-chart :chart-data="typeChartData" @clickChart="clickChart" />-->
            <!--              </div>-->
            <!--            </el-col>-->
            <!--            <el-col :span="12">-->
            <!--              <div v-loading="lpChartLoading" style="max-height: 220px">-->
            <!--                <el-empty v-if="(!lpChartData || lpChartData.length <= 0) && !lpChartLoading" description="暂无数据" />-->
            <!--                <fund-expense-lp-chart :chart-data="lpChartData" @clickChart="clickChart" />-->
            <!--              </div>-->
            <!--            </el-col>-->
            <!--          </el-row>-->
            <el-table
              v-loading="tLoading"
              :data="dataChartList.data"
              :cell-style="tableStyle"
              :max-height="tableHeight"
              border
            >
              <el-table-column
                v-for="(col, index) in dataChartList.columns"
                :key="index"
                :label="col.label"
                align="center"
                :show-overflow-tooltip="true"
                :prop="col.prop"
                :min-width="col.prop === 'type' ? 100 : 120"
                :fixed="col.prop === 'type' ? 'left' : col.prop === 'sum' ? 'right' : false"
              >
                <template slot-scope="scope">
                  <span v-if="col.prop === 'type'" :style="{'font-weight': scope.row[col.prop] === '合计' ? 'bolder' : ''}">{{ scope.row[col.prop] === '合计' ? scope.row[col.prop] : selectDictLabel(expenseTypes,scope.row[col.prop]) }}</span>
                  <span v-else class="money-text" :style="{'font-weight': scope.row['type'] === '合计' ? 'bolder' : ''}">{{ moneyFormat(scope.row[col.prop]) }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="list-table">
      <div v-show="!menuKeyMark" class="area-header">
        <span class="area-header-title">{{ $t('基金费用') }}</span>
      </div>
      <el-form v-if="!$route.query.id" ref="queryForm" :model="queryParams" :inline="true" @submit.native.prevent>
        <el-form-item :label="$t('申请标题')" prop="actTitle">
          <el-input v-model="queryParams.actTitle" :placeholder="$t('申请标题')" clearable :maxlength="200" @keyup.enter.native="queryHandle" />
        </el-form-item>
        <el-form-item v-if="$route.query.id" :label="$t('出资人')" prop="investId">
          <fund-lp-select v-model="queryParams.investId" :fund-id="$route.query.id" />
        </el-form-item>
        <el-form-item :label="$t('费用类型')" prop="typesFee">
          <dict-select v-model="queryParams.typesFee" :placeholder="$t('费用类型')" dictionary="fund_expense_type_fee" />
        </el-form-item>
        <el-form-item :label="$t('时段')" prop="rangeDate">
          <date-picker v-model="rangeDate" type="daterange" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle('chart')">{{ $t("搜索") }}</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery('chart')">{{ $t("重置") }}</el-button>
        </el-form-item>
      </el-form>
      <el-row v-if="!menuKeyMark" :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            v-hasPermi="['fund:expense:edit']"
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="addHandle"
          >{{ $t("新增") }}</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            v-hasPermi="['fund:expense:edit']"
            type="success"
            icon="el-icon-edit"
            size="mini"
            @click="batchAddHandle"
          >{{ $t("批量新增") }}</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            v-hasPermi="['fund:expense:export']"
            type="warning"
            icon="el-icon-download"
            size="mini"
            @click="exportHandle"
          >
            导出
          </el-button>
        </el-col>
      </el-row>

      <el-table v-loading="loading" :data="fundExpenseList" :show-summary="true" :summary-method="getSummaries" border>
        <el-table-column :label="$t('序号')" type="index" align="center" show-overflow-tooltip width="50">
          <template slot-scope="scope">
            {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('申请标题')" align="center" prop="actTitle" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span class="link-type" @click="updateHandle(scope.row)">{{ scope.row.actTitle }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('发生时间')" align="center" prop="applyTime" show-overflow-tooltip width="110">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.applyTime) }}</span>
          </template>
        </el-table-column>
        <!--<el-table-column label="部门" align="center" prop="departmentName" />-->
        <el-table-column :label="$t('费用金额(元)')" header-align="center" align="right" prop="amountMoney" show-overflow-tooltip width="110">
          <template slot-scope="scope">
            <span class="money-text">{{ moneyFormat(scope.row.amountMoney) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('费用类型')" align="center" prop="typesFee" show-overflow-tooltip :formatter="typesFeeFormat" />
        <el-table-column :label="$t('费用明细')" align="center" prop="costsThat" show-overflow-tooltip />
        <el-table-column v-if="useProcess" :label="$t('审批状态')" align="center" width="120">
          <template slot-scope="scope">
            <ProcessStatus :status="scope.row.actStatus" :act-id="scope.row.actId" />
          </template>
        </el-table-column>
        <el-table-column :label="$t('操作')" fixed="right" align="center" class-name="small-padding fixed-width" width="260">
          <template slot-scope="scope">
            <ListBtn v-if="useProcess" :bus-data="scope.row" has-permi="fund:expense" />

            <el-button
              v-if="!useProcess"
              v-hasPermi="['fund:expense:edit']"
              size="small"
              type="text"
              icon="el-icon-edit"
              @click="updateHandle(scope.row)"
            >{{ $t('修改') }}</el-button>
            <el-button
              v-if="!useProcess"
              v-hasPermi="['fund:expense:remove']"
              size="small"
              type="text"
              icon="el-icon-delete"
              @click="deleteHandle(scope.row)"
            >{{ $t('删除') }}</el-button>
            <el-button
              size="small"
              type="text"
              icon="el-icon-s-order"
              style="margin-right: 5px;"
              @click="fundExpenseFeeDetail(scope.row)"
            >{{ $t('费用明细') }}</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div>
        <el-dialog :title="$t('请维护付款时间')" :visible.sync="dialogVisiblePayTime" width="30%" :before-close="updatePayTime" :close-on-click-modal="false" :lock-scroll="false" append-to-body>
          <DatePicker
            v-model="dialogVisiblePayTimeValue"
            :placeholder="$t('维护后将不能修改,请确认后操作!')"
          />
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisiblePayTime = false">{{ $t("取消") }}</el-button>
            <el-button type="primary" @click="updatePayTimeSuccess">{{ $t("确定") }}</el-button>
          </span>
        </el-dialog>
      </div>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <!-- 添加或修改基金费用对话框 -->
      <el-dialog :title="title" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
        <fundExpenseForm ref="fundExpenseForm" />
      </el-dialog>
      <!-- 批量添加费用 -->
      <el-dialog :title="$t('批量新增-基金费用')" :visible.sync="batchFormOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
        <fund-batch-expense-form ref="batchFundExpense" />
      </el-dialog>
      <!-- 基金费用明细 -->
      <el-dialog :title="title" :visible.sync="listOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
        <fundManageFeeDetailList v-if="isFundManager" ref="fundManageFeeDetailList" />
        <fundExpenseFeeDetailList v-else ref="fundExpenseFeeDetailList" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  listFundExpense,
  listFundExpenseByResult,
  delFundExpense,
  updatePayTime,
  statisticalList, statisticalListByLp, getFundExpenseSum, getFundExpenseByResultSum
} from '@/api/fund/expense/fundExpense'
import fundExpenseForm from './fundExpenseForm.vue'
import fundManageFeeDetailList from '@/views/fund/manageFeeDetail/fundManageFeeDetailList'
// import ProcessStatus from '@/components/Act/ProcessStatus'
import { downLoadExcel } from '@/utils/excelDownload'
import fundExpenseFeeDetailList from '@/views/fund/expenseFeeDetail/fundExpenseFeeDetailList'
import CircleChart from '@/views/chart/circleChart'
// import FundExpenseTypeChart from '@/views/chart/fundExpenseTypeChart'
// import FundExpenseLpChart from '@/views/chart/fundExpenseLpChart'
import FundLpSelect from '@/components/Select/fundLpSelect'
import { getMenuProcess } from '@/api/act/process/wfMenuProcess'
import { listDealInvestmentAll } from '@/api/deal/investment/dealInvestment'
import FundBatchExpenseForm from '@/views/fund/expense/fundBatchExpenseForm.vue'

export default {
  components: {
    FundBatchExpenseForm,
    CircleChart,
    fundManageFeeDetailList,
    // FundExpenseTypeChart,
    // FundExpenseLpChart,
    fundExpenseForm,
    // ProcessStatus,
    fundExpenseFeeDetailList,
    FundLpSelect
    // Treeselect
  },
  data() {
      return {
          // 遮罩层
          loading: true,
          tLoading: true,
          typeChartLoading: true,
          lpChartLoading: true,
          tableLoading: true,
          // 费用类型统计数据
          typeChartData: [],
          lpChartData: [],
        isFundManager: false,
          // 总条数
          total: 0,
          // 基金费用表格数据
          fundExpenseList: [],
          fundExpenseSum: [],
          typesFeeOptions: [],
          expenseTypes: [],
          // 表格数据
          dataList: [],
          // 弹出层标题
          title: '',
          // 是否显示弹出层
          formOpen: false,
          listOpen: false,
          batchFormOpen: false,
          // 是否配置了流程
          useProcess: false,
          // 查询参数
          queryParams: {
              actTitle: undefined,
              fundId: this.$route.query.id,
              department: undefined,
              costsThat: undefined,
              whetherToMaintain: undefined,
              pageNum: 1,
              pageSize: 10,
            investId: undefined
          },
        rangeDate: [],
          // 表单参数
          form: {},
          // 更新付款时间
          dialogVisiblePayTime: false,
          // 选中的时间
          dialogVisiblePayTimeValue: new Date(),
          // 要修改的ID
          dialogVisiblePayTimeId: '',
          // 表单校验
          rules: {},
          // 部门
          deptOptions: [],
          menuKeyMark: undefined,
        dataChartList: {},
        typeDataList: [],
        expenseSum: 0,
        tableHeight: 0,
        shareItemOptions: []
      }
  },
  watch: {
    dataList: {
      handler() {
        this.tLoading = true
        this.$nextTick(() => {
          var tableDiv = document.getElementById('table')
          this.tableHeight = tableDiv.clientHeight - 10
          this.tLoading = false
        })
      },
      deep: true,
      immediate: true
    }
  },
  created() {
      // 查询是否配置了流程
      this.getUseProcess()
      this.getDicts('fund_expense_type_fee').then(response => {
        this.typesFeeOptions = response.data
      })
      this.getDicts('fund_expense_type_fee').then(res => {
        this.expenseTypes = res.data
        this.getStatisticalList()
        this.getChartData()
        this.getChartDataByLp()
      })
      this.getList()
  },
  methods: {
    /** 查询部门下拉结构 */
    // getTreeselect() {
    //   treeselect().then(response => {
    //     this.deptOptions = response.data
    //   })
    // },
    tableStyle({ row, column, rowIndex, columnIndex }) {
      console.log(row, column, rowIndex, columnIndex)
      if (column.property.indexOf('FY-') !== -1) {
        return {
          background: 'rgba(246, 247, 251, 1)'
        }
      }
    },
    // 分摊项目下拉
    apportionmentItemSelect() {
      this.shareItemOptions = []
      var fundId = this.form.fundId
      if (fundId === undefined || fundId === null || fundId === '') {
        fundId = this.thatFundId
      }
      listDealInvestmentAll({ investorId: fundId }).then(response => {
        console.log(response.data)
        if (response.data !== null && response.data !== undefined) {
          response.data.forEach(item => {
            const option = {
              dictLabel: item.dealName,
              dictValue: item.dealId
            }
            this.shareItemOptions.push(option)
          })
        }
      })
    },
    clickChart(data) {
      this.queryParams.pageNum = 1
      if (data.type === 'type') {
        this.queryParams.typesFee = data.value
        this.getChartDataByLp()
      } else {
        this.queryParams.userName = data.value
        this.getChartData()
      }
      this.getList()
    },
    getStatisticalList() {
      this.tableLoading = true
      statisticalList(this.queryParams).then(res => {
        var arr = []
        var hasArr = []
        var sum = 0
        res.data.forEach(item => {
          var obj = {}
          obj[item.type] = item.amountMoney
          arr.push(obj)
          hasArr.push(item.type)
          sum += item.amountMoney
        })
        this.expenseTypes.forEach(dict => {
          if (!hasArr.includes(dict.dictValue)) {
            var obj = {}
            obj[dict.dictValue] = ''
            arr.push(obj)
          }
        })
        arr.push({ 'SUM': sum })
        this.expenseSum = sum
        this.dataList = arr
        console.log(this.dataList)
        this.tableLoading = false
      })
    },
    getChartData() {
      this.typeChartLoading = true
      statisticalList(this.queryParams).then(res => {
        res.data.forEach(item => {
          item.dictLabel = this.selectDictLabel(this.expenseTypes, item.type)
        })
        this.typeChartData = res.data
        this.typeChartLoading = false
      })
    },
    getChartDataByLp() {
      this.lpChartLoading = true
      statisticalListByLp(this.queryParams).then(res => {
        this.dataChartList = { columns: [], data: [] }
        this.dataChartList = res.data
        this.lpChartData = res.data
        this.lpChartLoading = false
      })
    },
    typesFeeFormat(row) {
      return this.selectDictLabel(this.typesFeeOptions, row.typesFee)
    },
    /** 查询基金费用列表 */
    getList() {
      this.menuKeyMark = this.$route.params.menuKeyMark
      this.loading = true
      if (this.menuKeyMark) {
        getFundExpenseByResultSum(this.queryParams).then(response => {
          this.fundExpenseSum = response.data
        })
        listFundExpenseByResult(this.queryParams).then(response => {
          this.fundExpenseList = response.rows
          this.total = response.total
          this.loading = false
        })
      } else {
        getFundExpenseSum(this.queryParams).then(response => {
          this.fundExpenseSum = response.data
        })
        listFundExpense(this.queryParams).then(response => {
          this.fundExpenseList = response.rows
          this.total = response.total
          this.loading = false
        })
      }
    },
    // 表单重置
    reset() {
        this.form = {
            id: undefined,
            fundId: this.$route.query.id,
            applyId: undefined,
            applyTime: undefined,
            department: undefined,
            amountMoney: undefined,
            costsThat: undefined,
            payCompletionTime: undefined,
            actId: undefined,
            actStatus: undefined,
            remark: undefined,
            createBy: undefined,
            createTime: undefined,
            updateBy: undefined,
            updateTime: undefined,
            delFlag: undefined,
            typesFee: undefined,
            userName: undefined,
            beginTime: undefined,
            endTime: undefined,
          investId: undefined
        }
        this.rangeDate = []
        this.resetForm('form')
    },
    /** 搜索按钮操作 */
    queryHandle() {
        this.queryParams.pageNum = 1
      if (this.rangeDate && this.rangeDate.length > 1) {
        this.queryParams.beginTime = (this.rangeDate)[0]
        this.queryParams.endTime = (this.rangeDate)[1]
        this.getStatisticalList()
        this.getChartData()
        this.getChartDataByLp()
      } else {
          this.queryParams.beginTime = undefined
          this.queryParams.endTime = undefined
      }
      this.getStatisticalList()
      this.getChartDataByLp()
      this.getChartData()
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery(type = 'list') {
        if (type === 'chart') {
          this.rangeDate = []
          this.queryParams.beginTime = undefined
          this.queryParams.endTime = undefined
          this.queryParams.typesFee = undefined
        }
        this.queryParams.actTitle = ''
        this.resetForm('queryForm')
        this.queryHandle(type)
    },
    /** 新增按钮操作 */
    addHandle() {
        this.formOpen = true
        this.title = this.$t('基金费用')
        this.$nextTick(() => {
            this.$refs.fundExpenseForm.init(null)
        })
    },
    batchAddHandle() {
      this.batchFormOpen = true
      this.$nextTick(() => {
        this.$refs.batchFundExpense.init(null)
      })
    },
    /** 修改按钮操作 */
    updateHandle(row) {
        this.formOpen = true
        this.title = this.$t('基金费用')
        this.$nextTick(() => {
            // 调用form页面的 init 方法初始化数据
            this.$refs.fundExpenseForm.init(row)
        })
    },
    /** 基金费用明细 */
    fundExpenseFeeDetail(row) {
      this.listOpen = true
      if (row.sourceId && row.typesFee === 'JJGLF') {
        this.isFundManager = true
      } else {
        this.isFundManager = false
      }
      this.title = this.$t('基金费用明细')
      this.$nextTick(() => {
        // 调用List页面的 getFundExpenseFeeDetail 方法初始化数据
        if (this.isFundManager) {
          var obj = { id: row.sourceId }
          this.$refs.fundManageFeeDetailList.getManageFeeDetail(obj)
        } else {
          this.$refs.fundExpenseFeeDetailList.getFundExpenseFeeDetail(row)
        }
      })
    },
    /** 删除按钮操作 */
    deleteHandle(row) {
        this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
            confirmButtonText: this.$t('确定'),
            cancelButtonText: this.$t('取消'),
            type: 'warning'
        }).then(function() {
            return delFundExpense(row.id)
        }).then(() => {
            this.getList()
            this.msgSuccess(this.$t('删除成功'))
        }).catch(function() {
        })
    },
    // 付款时间维护 : 按钮获取数据
    updatePayTimeBtn(row) {
      this.updatePayTime(row)
    },
    // 付款时间维护 : 将数据传递到打开弹窗
    updatePayTime(row) {
      this.dialogVisiblePayTime = true
      this.dialogVisiblePayTimeId = row.id
    },
    // 付款时间维护 : 保存到后台
    updatePayTimeSuccess() {
      try {
        if (this.dialogVisiblePayTimeValue === '' || this.dialogVisiblePayTimeValue === undefined || this.dialogVisiblePayTimeValue === null) {
          this.msgError(this.$t('时间为空!'))
        } else {
          updatePayTime(this.dialogVisiblePayTimeId, new Date(this.dialogVisiblePayTimeValue)).then(() => {
            this.getList()
          })
          this.dialogVisiblePayTime = false
        }
      } catch (e) {
        this.msgSuccess(this.$t('维护失败'))
        this.dialogVisiblePayTime = false
      }
    },
    /** 导出按钮操作 */
    exportHandle() {
        downLoadExcel('/expense/fundExpense/export', this.queryParams)
    },
    // 获取是否使用流程
    getUseProcess() {
      getMenuProcess('fund_expense').then(response => {
        this.useProcess = !!response.data
      })
    },
    // 合计
    getSummaries(param) {
      const { columns } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
        } else if (index === 3) {
          sums[index] = this.moneyFormat(this.fundExpenseSum.amountMoney)
        } else {
          sums[index] = ''
        }
      })
      return sums
    }

  }
}
</script>
<style lang="scss" scoped>
.table {
  min-height: 120px;
  max-height: 400px;
}
.fund-parent {
  background-color: #F8F9FA;
  height: 48px;
  margin-right: 10px;
  padding:0 5px;
  &:nth-child(2n){
    margin: 0;
  }

  .left-text{
    text-align: left;
    // flex: 1;
    display: flex;
    align-items: center;
    // width: calc(100% - 100px);
  }

  .referenceSpan{
    white-space: nowrap;
    overflow: hidden;
    width: calc(100% - 2vh);
    text-overflow: ellipsis;
    font-size: 13px;
    max-width: 100px;
  }

  .money-text {
    color: rgb(51, 52, 54);
    font-weight: bold;
    padding-left: 10px;
    display: block;
    // max-width: 100px;
    flex: 1;
    font-size: 14px;
    text-align: right;
  }
}

.wrap-pop-expense {
  /* 背景色 */
  background: rgba(0,0,0,.7) !important;
  color: #fff !important;
  border: 1px solid rgba(0,0,0,.7) !important;
}

/* 下方是去除三角箭头的代码 */
.wrap-pop-expense[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: rgba(0,0,0,.7) !important;
}

.wrap-pop-expense[x-placement^="bottom"] .popper__arrow {
  border-bottom-color: rgba(0,0,0,.7) !important;
}
</style>
